<template>
	<p class="nav">
		<router-link tag='div' class="nav-item" :to="{name:'Home'}" exact>
			<p class="nav-desc">聚焦</p>
		</router-link>
		<router-link 
					tag='div' 
					class="nav-item" 
					v-for='item of nav_list'
					:key='item.id'
					:to="{name:item.path_name}"
		>
			<p class="nav-desc">
				{{item.desc}}
			</p>
		</router-link>	
	</p>
</template>

<script>
	export default {
		name: 'common-navbar',
		data () {
			return {
				nav_list: [
					{
						"id": "01",
						"path_name": "Hot",
						"desc": "热贴"
					},
					{
						"id": "02",
						"path_name": "Eight",
						"desc": "八卦"
					},
					{
						"id": "03",
						"path_name": "Video",
						"desc": "视频"
					},
					{
						"id": "04",
						"path_name": "Picture",
						"desc": "图集"
					}
				]
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import '~stylus/glo.styl'
	.nav
		width:100%
		height:90px
		display: flex
		text-align: center
		background:$bgColor
		.nav-item		
			flex: 1
			text-decoration: none
			color:#666
			cursor:pointer
		.nav-desc
			font-size:30px
			margin-top:4px
			line-height:88px		
		.router-link-exact-active
			height:78px
			margin:0 auto
			color:$public_thems_color
			border-bottom:6px $public_thems_color solid			
</style>